<script setup>
import { computed, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { ElAvatar, ElBadge, ElTooltip } from 'element-plus';
import defaultAvatar from '@/assets/images/base-img/默认头像.png';
import SvgIconIndex from '@/components/SvgIconIndex.vue';
import { useSystemStore } from '@/stores';
import useStompJsStore from '@/stores/webSocket';
import { clearToken } from '@/utils/auth';

const props = defineProps({
  screenTitle: String,
});
const { screenTitle } = toRefs(props);

const systemStore = useSystemStore();
const stompJsStore = useStompJsStore();

const router = useRouter();

const avatarURL = computed(() => {
  return !systemStore?.userInfo?.avatar ? defaultAvatar : systemStore?.userInfo?.avatar;
});

const fireCount = computed(() => 0);
const securityCount = computed(() => 0);
const patrolCount = computed(() => 0);
const emergencyCount = computed(() => 0);

const handlePersonalCenter = () => {
  systemStore.SET_PERSONAL_SHOW(true);
};

// 路由跳转
const goTo = (val) => {
  clearToken();
  router.replace(val);
  location.reload();
};

const handleGetBack = () => {
  window.history.back();
};
</script>
<template>
  <div class="header-screen-root">
    <div class="header-screen relative flex items-center justify-between">
      <div class="relative left-0px top--20px z-9 w-130px flex flex-col items-center" title="返回">
        <img src="@/assets/images/icon/返回.png" class="cursor-pointer" @click="handleGetBack()" />
      </div>
      <div class="bg-icon-box">{{ screenTitle }}</div>

      <div class="absolute right-5 top-10px z-3 flex items-center">
        <ElTooltip :content="'防火预警'" placement="bottom">
          <ElBadge :value="fireCount" :max="99" class="item mr-20px">
            <img
              src="@/assets/images/icon/火情.png"
              class="h-22px w-22px cursor-pointer"
              @click="handleJumpRoute('', '防火预警')"
            />
          </ElBadge>
        </ElTooltip>

        <ElTooltip :content="'安防事件'" placement="bottom">
          <ElBadge :value="securityCount" :max="99" class="item mr-20px">
            <img
              src="@/assets/images/icon/安防.png"
              class="h-22px w-22px cursor-pointer"
              @click="handleJumpRoute('', '安防事件')"
            />
          </ElBadge>
        </ElTooltip>
        <ElTooltip :content="'紧急事件'" placement="bottom">
          <ElBadge :value="emergencyCount" :max="99" class="item mr-20px">
            <img
              src="@/assets/images/icon/紧急事件.png"
              class="h-22px w-22px cursor-pointer"
              @click="handleJumpRoute('', '紧急事件')"
            />
          </ElBadge>
        </ElTooltip>
        <ElTooltip :content="'巡护事件'" placement="bottom">
          <ElBadge :value="patrolCount" :max="99" class="item mr-20px">
            <img
              src="@/assets/images/icon/巡护.png"
              class="h-22px w-22px cursor-pointer"
              @click="handleJumpRoute('', '巡护管理')"
            />
          </ElBadge>
        </ElTooltip>

        <ElTooltip :content="'系统退出'" placement="bottom">
          <SvgIconIndex
            icon-class="exit"
            size="20px"
            class="ml-20px mr-20px cursor-pointer"
            title="系统退出"
            color="#DCEAFF"
            @click="
              () => {
                stompJsStore.setDeActivate();
                goTo('/login');
              }
            "
          />
        </ElTooltip>
        <ElTooltip :content="systemStore?.userInfo?.username" placement="bottom">
          <ElAvatar
            :size="25"
            :src="avatarURL"
            @click="
              () => {
                handlePersonalCenter();
              }
            "
          />
        </ElTooltip>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-screen-root {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 90px;
  color: #fff;
  background: linear-gradient(180deg, #09315d 0%, rgba(12, 58, 103, 0) 100%);
  .header-screen {
    width: 100%;
    height: 100%;
    background: url('@/assets/images/img/导航.png') no-repeat center right;
    background-size: 100% 100%;
  }
  .bg-icon-box {
    position: absolute;
    top: -10px;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding-top: 18px;
    font-size: 38px;
    font-family: YouSheBiaoTiHei;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 0 16px rgba(52, 109, 255, 0.8), 0 0 16px rgba(52, 109, 255, 0.6);
  }
}
</style>
